<template>
	<view
		:style="'height:' + (custom.statusBar + custom.nvaMartom + custom.navHeight + 20) + 'rpx;position:fixed;top:0;' + bgType"
		class="custom">
		<view class="block custom-block"
			:style="'height:' + custom.navHeight + 'rpx;width:100%;margin-top:' + (custom.statusBar + custom.nvaMartom) + 'rpx;'">
			<!-- <view v-if="isBack" @click="back()" :style="'color:' + styles.textColor" class="iconfont icon-fanhui backup-btn"></view> -->
			<view class="userPhoto" v-if="user.phone">
				<image :src="cloudStorage+user.faceUrl"></image>
				<view class="username">
					{{user.name}}
				</view>
			</view>
			<view style="height: 100%" :style="'color:' + styles.textColor" class="title">{{ title }}</view>
			<view v-if="isBack" style="visibility: hidden" class="iconfont icon-fanhui backup-btn"></view>
			<view class="right" style="width: 129px;height: 10rpx;">

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStorage,
		setStorage
	} from '@/util/auth';
	import {
		getCustomNav
	} from '@/util/util.js';
	import {
		getUserInfo
	} from '@/api/home.js'
	export default {
		name: 'CustomNav',
		props: {
			isBack: Boolean,
			title: {
				type: String,
				default: ''
			},
			normal: {
				default: function() {
					return {
						textColor: '#fff',
						background: 'rgba(0,0,0,0)'
					};
				}
			},
			active: {
				default: function() {
					return {
						textColor: '#fff',
						background: '#FF2F34'
					};
				}
			}
		},
		watch: {
			styles: {
				deep: true,
				handler(e) {
					const str = e.background.slice(0, 1);
					this.bgType = str == '#' || str == 'r' ? `background:${e.background}` :
						`background-image:${e.background}`;
				}
			}
		},
		data() {
			return {
				user: {},
				bgType: '',
				custom: {
					statusBar: 0,
					nvaMartom: 0,
					navHeight: 0
				},
				styles: {
					textColor: '#fff',
					background: 'rgba(0,0,0,0)'
				}
			};
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				getUserInfo().then((res) => {
					this.user = res
				})
			},
			backup() {
				uni.navigateBack({
					fail() {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			},
			navigate(url) {
				uni.navigateTo({
					url
				});
			},
			setStlyes(key) {
				this.styles = this[key];
			}
		},
		mounted() {
			uni.$on('scrollChange', (e) => {
				e.detail.scrollTop >= 1 ? this.setStlyes('active') : this.setStlyes('normal');
			});
			this.custom = getCustomNav();
			this.setStlyes('normal');
			//获取用户信息
			if (getStorage('token')) {
				this.getUserInfo()
			}
		},
		beforeDestroy() {
			uni.$off('scrollChange');
		}
	};
</script>

<style lang="scss" scoped>
	.custom {
		z-index: 999999;
		width: 100%;
		transition: all 0.3s ease;

		.custom-block {
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			.userPhoto {
				display: flex;
				align-items: center;

				image {
					width: 45rpx;
					height: 45rpx;
					border-radius: 60rpx;
					margin-right: 10rpx;
				}

				.username {
					font-size: 24rpx;
					color: #FFFFFF;
					width: 100px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.title {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 20rpx;
				flex-grow: 1;
				transition: all 0.3s ease;
				font-size: 28rpx;
			}

			.iconfont.backup-btn {
				display: flex;
				align-items: center;
				flex-grow: 0;
				margin-left: 20rpx;
				color: #fff;
				font-size: 36rpx;
				transition: all 0.3s ease;
			}
		}
	}
</style>